<template>
  <transition name="mini">
    <div
      class="mini-player"
      v-show="!fullScreen && playlist.length"
      @click="showNormalPlayer"
    >
      <div class="cd-wrapper">
        <div class="cd">
          <img width="40" height="40" :src="currentSong.pic" />
        </div>
      </div>
      <div class="slider-wrapper" ref="sliderWrapperRef">
        <div class="slider-group">
          <div class="slider-page" v-for="song in playlist" :key="song.id">
            <h2 class="name">{{ currentSong.name }}</h2>
            <p class="desc">{{ currentSong.singer }}</p>
          </div>
        </div>
      </div>
      <div class="control">
        <progress-circle :radius="32" :progress="progress">
          <!--icon 中间三角形-->
          <i
            class="icon-mini"
            :class="miniPlayIcon"
            @click.stop="togglePlay"
          ></i>
        </progress-circle>
      </div>
      <div class="control" @click.stop="showPlaylist">
        <i class="icon-playlist"></i>
      </div>
      <play-list ref="playlistRef"></play-list>
    </div>
  </transition>
</template>

<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import ProgressCircle from '@/components/player/progress-circle.vue'
import useMiniSlider from '@/components/player/use-mini-slider'
import PlayList from '@/components/player/playlist.vue'

export default {
  name: 'mini-player',
  components: {
    ProgressCircle,
    PlayList
  },
  props: {
    progress: {
      type: Number,
      default: 0
    },
    togglePlay: Function
  },
  setup () {
    const store = useStore()
    const playlistRef = ref()
    // hooks
    const { sliderWrapperRef } = useMiniSlider()

    const currentSong = computed(() => store.getters.currentSong)
    const playing = computed(() => store.state.playing)
    const miniPlayIcon = computed(() =>
      playing.value ? 'icon-pause-mini' : 'icon-play-mini'
    )
    const fullScreen = computed(() => store.state.fullScreen)
    const playlist = computed(() => store.state.playlist)

    const showNormalPlayer = () => {
      store.commit('setFullScreen', true)
    }
    const showPlaylist = () => {
      playlistRef.value.show()
    }
    return {
      currentSong,
      miniPlayIcon,
      fullScreen,
      playlistRef,
      showNormalPlayer,
      playlist,
      // use-mini-slider
      sliderWrapperRef,
      showPlaylist
    }
  }
}
</script>

<style lang="scss" scoped>
.mini-player {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  z-index: 40;
  padding: 10px 0;
  background: $color-highlight-background;
  .cd-wrapper {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0 10px 0 20px;
    img {
      border-radius: 50%;
    }
  }
  .slider-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    .slider-group {
      // 无法滚动bug修复
      // !!!content宽度>wrapper宽度，才会滚动
      min-width: max-content;
      display: flex;
      flex-wrap: nowrap;
      .slider-page {
        //flex: 0 0 100%;
        width: calc(100vw - 100px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-size: $font-size-medium;
          color: $color-text;
        }
        .desc {
          font-size: $font-size-small;
          color: $color-text-d;
        }
      }
    }
  }
  .control {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: $color-theme-d;
    font-size: 32px;
    .icon-mini {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.mini-enter-from,
.mini-leave-to {
  opacity: 0;
  // 消失时向下位移
  transform: translateY(100%);
}
.mini-enter-active,
.mini-leave-active {
  transition: all 0.6s;
}
</style>
